<!-- 商品分类界面 -->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("path", path);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
		<base href="<%=basePath%>">
    
    <title>商品分类界面</title>
   
	<script src="/common/js/jquery-1.11.3.js" charset="UTF-8"></script>
	
	
	<script type="text/javascript" src="/common/zui/js/zui.min.js" ></script>
	<link rel="stylesheet" href="/common/zui/css/zui.min.css" />
    
    <link href='/common/css/product/public.css' rel="stylesheet" type="text/css" />
    
   		<link rel="stylesheet" href="/common/layui/css/layui.css">
   		<script src="/common/layui/layui.js" charset="utf-8"></script>
   
   
   
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta name="viewport" content="width=device-width,user-scalable=no"/>
	<link rel="stylesheet" type="text/css" href="/common/css/product/classify.css">
	
	 		<style type="text/css">
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
fieldset,img{border:0;}
:focus{outline:0;}
ol,ul{list-style:none;list-style-position:outside;}
table{border-collapse:collapse;border-spacing:0;}
address,caption,cite,code,dfn,em,i,strong,th,var,optgroup{font-style:normal;font-weight:normal;}
body,button,input,select,textarea{font:12px/1.5 微软雅黑,arial,sans-serif;}
button,input,select,textarea,h1,h2,h3,h4,h5,h6{font-size:100%;}
body{color:#333;min-width: 1120px;}
a{color:#333;text-decoration:none;}
a:hover{color:#f60;text-decoration:underline;}
a:hover em,a:hover i,a:hover span{cursor:pointer;}
.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.cf{*zoom:1;}

/*** guide ***/
.guide{width:60px;margin-left:770px;position:fixed;left:50%;bottom:134px;_position:absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight - 134+'px');display:block;}
.guide a{display:block;width:60px;height:50px;background:url(http://localhost:8083/fileserver/wares/sprite_v2.png) no-repeat;margin-top:10px;text-decoration:none;font:16px/50px "Microsoft YaHei";text-align:center;color:#fff;border-radius:2px;}
.guide a span{display:none;text-align:center;}
.guide a:hover{text-decoration:none;background-color:#39F;color:#fff;}
.guide a:hover span{display:block;width:60px;background:#39F}
.guide .find{background-position:-84px -236px;}
.guide .report{background-position:-146px -236px;}
.guide .edit{background-position:-83px -185px;}
.guide .top{background-position:-145px -185px;}
</style>
	
	<style type="text/css">
		.li-span{
			color:red;
		}
		.condition-div .active{
			background: #FFC355;
			border: 1px solid #FFC355;
			border-radius: 5px 5px 5px 5px ;	
			
		}
		.condition-div .active a{		
			color: #FFF;
		}
		.active span{
			color: white;
		}
		.condition-div .hover-li{
			background:#E8F2FE;
			cursor:pointer;
		
		}
		
		.condition-div .hover-li a{
			color: #0078D7;			
		}
		.hover-li1 {
			
			cursor: pointer;
		}
		.hover-li1 a {
			color:red;
		}
		
		.hover-div .div-btn{
			width:268.3px;
			height:40px;
			position: relative;
			top:-4px;
			left:-12.5px;
			z-index: 999;
			border: 1.5px solid red;
			border-top: none;
			background: white;
		}
		.hover-div .div-btn div{
			position: relative;
			left: 10px;
		}
		#search-div{
				width: 280px;
				background:#FFF;
				position: absolute;
				z-index:999;
				top:46px;
				left:20px;
				max-width: 300px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
		.search_a p:hover{
			background: #F5F5F5;
			color:red;	
		}
		.search_a {
		
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap; 
		}
	</style>
	
	<script type="text/javascript">
	
		/*
			初始化条件
		*/
		var conditionBean = {
			"typeId":0,
			"waresuser":0,
			"minPrice":0,
			"maxPrice":0,
			"curPage":1,
			"volume":0,
			"price":0
		};
	
		$(document).ready(function(){
			
			
			
			//初始化加载数据
			$(".main-classify").load(
				"/product/showfy",
				conditionBean,
				function(){}
			); 
		
		
				$(".ul li > a").hover(
					function() {
						$(this).css("color", "red");
					},
					function() {
						$(this).css("color", "gray");
					});
				$("#login li>a").hover(

					function() {
						$(this).css("color", "red");
					},
					function() {
						$(this).css("color", "gray");
					});
			//类型选择样式
			$(".p-ul1>li").hover(
				function(){		
					
					if(Object.is($(this).attr("num"),"0")){
						$(this).addClass("hover-li1");
					}
								
				},
				function(){
					$(this).removeClass("hover-li1");
				}
				
			);
			
			//销售方样式
			$(".p-ul2>li").hover(
				function(){	
					//console.log("num"+$(this).attr("num"));
					if(Object.is($(this).attr("num"),"0")){
						$(this).addClass("hover-li1");
					}
								
				},
				function(){
					$(this).removeClass("hover-li1");
				}
				
			);
			
			//价格悬停样式
			$(".p-ul3>li").hover(
				function(){	
					//console.log("num"+$(this).attr("num"));
					if(Object.is($(this).attr("num"),"0")){
						$(this).addClass("hover-li1");
					}
								
				},
				function(){
					$(this).removeClass("hover-li1");
				}
				
			);
			
			
			//类型条件查询
			$(".p-ul1>li").click(function(){
				
				$(".p-ul1>li").removeClass("active");
				
				$(this).addClass("active");
				
				//修改条件对象
				conditionBean.warestypeId = $(this).attr("typeId");
				conditionBean.curPage = 1;
				//重新 load 商品 子界面
				$(".main-classify").load(
					"/product/showfy",
					conditionBean,
					function(){}
				);				
				
				
			});
			
			//销售方查询
			$(".p-ul2>li").click(function(){
				$(".p-ul2>li").removeClass("active");
				$(this).addClass("active");
				$(this).removeClass("hover-li1");
				$(this).css("cursor","pointer");
				
				
				conditionBean.waresuser = $(this).attr("waresuser");
				conditionBean.curPage = 1;
				$(".main-classify").load(
					"/product/showfy",
					conditionBean,
					function(){}
				);	
				
			});
			
			//价格条件查询
			
			$(".p-ul3>li").click(function(){		
				$(".p-ul3>li").removeClass("active");
				$(this).addClass("active");
				$(this).removeClass("hover-li1");
				$(this).css("cursor","pointer");
				conditionBean.minPrice = $(this).attr("min");
				conditionBean.maxPrice = $(this).attr("max");
				conditionBean.curPage = 1;
				$(".main-classify").load(
					"/product/showfy",
					conditionBean,
					function(){}
				);	

			});
			
			//销量排序
			$("#volume123").click(function(){		
				
				if(conditionBean.volume == 0){
					conditionBean.volume = 1;
				}else if(conditionBean.volume == 1){
					conditionBean.volume = 0;
				}
				
				conditionBean.curPage = 1;
				$(".main-classify").load(
					"/product/showfy",
					conditionBean,
					function(){}
				);	

			});
			
			//价格排序
			$("#price123").click(function(){		
				
				if(conditionBean.price == 0){
					conditionBean.price = 1;
				}else if(conditionBean.price == 1){
					conditionBean.price = 0;
				}
				
				conditionBean.curPage = 1;
				$(".main-classify").load(
					"/product/showfy",
					conditionBean,
					function(){}
				);	

			});
			
			
			//div-border 边框div的鼠标悬浮事件
			$(".div-border").hover(			
				function(){
					$(this).addClass("hover-div");
					$(this).find(".div-btn").show();
				},
				function(){
					$(this).removeClass("hover-div");
					$(this).find(".div-btn").hide();
				}		
			);
			
		});
	</script>
	
	
  </head>
  
  <body>
  	<!--head-->
   <c:if test="${sessionScope.usercolor == null}">
		<header id="backcolor1" style="background: #671B0D;">
		</c:if>
		<c:if test="${sessionScope.usercolor != null}">
		<header id="backcolor1" style="background:${sessionScope.usercolor};">
		</c:if>
			<div class="top center">
				<div class="left fl">
					<ul>
						<li>
							<a href="/user/loginreg/index" target="_blank">JoinLabs商城</a>
						</li>
						<li>|</li>
						<li>
							<a href="/product/fytype">Joinlabs全部商品</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY聊</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY游戏</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY阅读</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY服务</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY金融</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY商城移动版</a>
						</li>
						<li>|</li>
						
							<li>
							<a href="">风格</a>	
						</li>
						
						
						<li>
							
							 <div id="test1"></div>
							 <script>
								layui.use('colorpicker', function(){
								  var $ = layui.$
								  ,colorpicker = layui.colorpicker;
								  //常规使用
								  colorpicker.render({
								    elem: '#test1' //绑定元素
								    ,change: function(color){ //颜色改变的回调
								    	//console.log(color);
								    	$("#backcolor1").attr("style","background: "+color+";");
								    	$("#backcolor2").attr("style","margin-top: 100px;background:"+color+";color:#B0B0B0;");
								    	$("#jrgwc1").attr("style","background: "+color+";");
										
								    	
								    },done: function(color){
								        console.log(color)
								       
								        $.post("/product/procolor", {
											"usercolor": color,
										}, function(data) {
											if(data == "success") {
												
												alert("选择颜色成功,有眼光呀！");

											}else{
												alert("选择失败，其实默认色挺好的");
											}
										});
								        
								      }
								  });
								});
								</script>
						</li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr">
						<a href="/shopcar/show">购物车</a>
					</div>
					<div class="fr">
						
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
		<div class="guide">
			<div class="guide-wrap">
				<a href="/user/loginreg/index" class="edit" title="首页"><span>首页</span></a>
				<a href="/product/addtest" class="find" title="地图"><span>地图</span></a>
				<a href="/product/fytype" class="report" title="all商品"><span>all商品</span></a>
				<a href="javascript:window.scrollTo(0,0)" class="top" title="回顶部"><span>回顶部</span></a>
			</div>
		</div>

		<div class="main" style="height: 1300px;width:80%;margin:0 auto;">
			<div class="main-nav1 condition-div">
				<div class="col-lg-1">
					<p class="nav1-p" style="color:#671B0D;">类别</p>
					<p class="nav1-p" style="color:#671B0D;">经营方</p>
					<p class="nav1-p" style="color:#671B0D;">价格区间</p>
				</div>
				<div class="col-lg-11">
					<p>
						<input type="hidden" value="0" name="typeId"/>
						<ul class="p-ul1">
						
						<li class="active" typeId="0">
								<a>全部&nbsp;&nbsp;&nbsp;</a>	
								<span class="li-span">(${allprocount})</span>						
						</li>
						
						<c:forEach items="${typelist}" var="type">
						
							<li typeId="${type.warestypeId }">
								<a>${type.typename}&nbsp;&nbsp;&nbsp;</a>	<span class="li-span">(${type.tcount})</span>
														
							</li>
						</c:forEach>
							
						</ul>						
					</p>
					
					<p>
						<input type="hidden" value="0" name="styleId"/>
						<ul class="p-ul2">
						
							<li class="active" waresuser="0">
									<a >全部</a>
								</li>
							
								<li waresuser="1">
									<a >官方经营</a>
								</li>
							
								<li waresuser="2">
									<a >个人自营</a>
								</li>
								
						</ul>
						
					</p>
					
					<p> 
						<input type="hidden" value="0" name="minPrice"/>
						<input type="hidden" value="0" name="maxPrice"/>
						<ul class="p-ul3">
							<li class="active" min="0" max="0">
								<a >全部</a>
							</li>
							<li  min="0" max="500">
								<a>0-500元</a>												
							</li>
							<li  min="500" max="1000">
								<a>500-1000元</a>											
							</li>
							<li  min="1000" max="2000">
								<a>1000-2000元</a>												
							</li>
							<li  min="2000" max="5000">
								<a>2000-5000元</a>
							</li>
							<li min="5000" max="99999999">
								<a>5000元以上</a>
							</li>
						</ul>
						
					</p>
				</div>
			</div>
			<div class="main-nav2 condition-div" name="top">
				<ul>
					
					<li id="volume123"><a>销量</a></li>
					<li id="price123"><a>价格</a></li>

				</ul>
			</div>
			
			<div class="main-classify" style="height:auto;position:relative;" >
			
			</div>
			
			<div class="clear"></div>
			
			
		</div>

		
  </body>
  
</html>
